<!DOCTYPE html>
<html lang="en">
<head>
    <title>车险理赔--赔付列表</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info" id="app">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        待赔付的案件
                    </div>
                    <div >
                        <form class="form-inline bg-warning" role="form">
                            查询条件：
                            <div class="form-group">
                                <input type="text" class="form-control" id="keyword" name="keyword" placeholder="关键词">
                            </div>
                            <button type="button" id="findPayBackRecord" class="btn btn-success">查询</button>
                            <button class="btn btn-default btn-lg glyphicon glyphicon-refresh" id="refresh"></button>
                        </form>
                        <div class="table-responsive" id="dataDiv">
                            <table class="table">
                                <thead>
                                <tr class="success">
                                    <td>序号</td>
                                    <td>案件编号</td>
                                    <td>保单编号</td>
                                    <td>客户姓名</td>
                                    <td>客户身份证号</td>
                                    <td>客户联系方式</td>
                                    <td>车牌号</td>
                                    <td>赔付金额</td>
                                    <td>立案员工</td>
                                    <td>案件状态</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="active" v-for="(item,index) in result">
                                    <td>{{index+1}}</td>
                                    <td>{{item.caseId}}</td>
                                    <td>{{item.order.oid}}</td>
                                    <td>{{item.order.user.sname}}</td>
                                    <td>{{item.order.user.scardId}}</td>
                                    <td>{{item.order.user.sphone}}</td>
                                    <td>{{item.cars.licenseNum}}</td>
                                    <td>{{item.payAccount}}</td>
                                    <td>{{item.emp.empName}}</td>
                                    <td>
                                        <span v-if="item.caseState==1"  style="color: red">审核通过待结算</span>
                                        <span v-if="item.caseState==3" id="state">已结算</span>
                                    </td>
                                    <td>
                                        <a href="javascript:void(0)" @click="editEvent(item.caseId,item.caseState)" id="checkMoney">结算</a>
                                    </td>
                                </tr>
                                </tbody>
                                <tr>
                                    <td colspan="5">
                                        <div id="page"></div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
        </section>
    <#include "foot.ftl"><#--引入底部-->
    </section>
</section>
</body>
</html>
<script type="text/javascript">
    $("#refresh").click(function () {
        window.location.href="";
    });
    var app = new Vue({
        el: "#app",
        data: {
            result: []
        }
    });
    var getUnPayCaseList = function (curr) {
        $.ajax({
            url: "/payBack/queryUnPayCase",
            type: "POST",
            data: {
                pageNum: curr || 1,
                pageSize: 7,
                keyword: $("#keyword").val()
            },
            success: function (data) {
                app.result = data.list;
                if(app.result.length==0){
                    $("#dataDiv").css("display", "none");
                    $("#app").find("p").remove();
                    $("#app").append("<p align='center' style='color: red'><font size='4px'>没有待结算案件</font></p>");
                    return;
                }
                laypage({
                    cont: "page",
                    pages: data.pages,
                    skin: "#00FFFF",
                    group: 3,
                    first: '首页',
                    last: '尾页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getUnPayCaseList(obj.curr);
                        }
                    }
                });
            }
        });

    };
    getUnPayCaseList();

    $("#findPayBackRecord").on("click", function () {
        getUnPayCaseList();
    });
    var editEvent = function (caseId, caseState) {
        if (caseState == 3) {
            layer.msg("已结算", {icon: 2, time: 2000});
            return;
        }
        layer.open({
            type: 2,
            title: "增加赔偿记录",
            fix: false,
            maxmin: true,
            shadeClose: true,
            area: ['1100px', '800px'],
            content: "/payBack/to_addPayBack?caseId=" + caseId,
            end: function () {
                getUnPayCaseList();
            }
        });
    };
</script>